<%@ page import="java.util.Date" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":"
            + request.getServerPort() + path + "/";
%>
<html>
<head>
    <base href="<%=basePath%>"/> <!-- 设置页面的基础路径，页面所有资源引入和页面跳转都基于bathPath -->

    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,patientRegister-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="Bookmark" href="/favicon.ico" >
    <link rel="Shortcut Icon" href="/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" />
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css" />
    <link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin" />
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css" />
</head>
<body>
<article class="page-container">
    <!-- form的action中根据判断共享对象patientRegister是否为空，来指定表单提交的url -->
    <form class="form form-horizontal" method="post" id="patientRegisterForm">
        <!-- 显示门诊挂号ID -->
        <div class="row cl">
            <div class="block col-xs-6 col-sm-6 col-sm-offset-2" >
                <div style="font-weight:bold">门诊挂号ID: ${patientRegister.patientRegisterId }</div>
            </div>
            <div class="block col-xs-6 col-sm-4" >
                <div style="font-weight:bold;color: red;">挂号费用: ${patientRegister.totalMoney }</div>
            </div>
        </div>

        <div class="row cl">
            <%--左边部分：患者基本信息--%>
            <div class="block col-xs-6 col-sm-6" style="background-color: lightgray;height: 300px;">
                <label style="font-weight: bold">患者基本信息</label><br>
                <div class="row cl left">
                    <label class="form-label col-xs-4 col-sm-4"><span class="c-red">*</span>姓名：</label>
                    <div class="formControls col-xs-8 col-sm-8">
                        ${patientRegister.patientName }
                    </div>
                </div>

                <div class="row cl left">
                    <label class="form-label col-xs-4 col-sm-4"><span class="c-red">*</span>性别：</label>
                    <div class="formControls col-xs-8 col-sm-8">
                        ${patientRegister.patientGender eq '1' ? '男' : '女' }
                    </div>
                </div>

                <div class="row cl left" >
                    <label class="form-label col-xs-4 col-sm-4"><span class="c-red">*</span>生日：</label>
                    <div class="formControls col-xs-8 col-sm-8">
                        ${patientRegister.patientBirthdayStr}
                    </div>
                </div>

                <div class="row cl left" >
                    <label class="form-label col-xs-4 col-sm-4"><span class="c-red">*</span>身份证号：</label>
                    <div class="formControls col-xs-8 col-sm-8">
                        ${patientRegister.patientIdCard}
                    </div>
                </div>

                <div class="row cl left" >
                    <label class="form-label col-xs-4 col-sm-4"><span class="c-red">*</span>住址：</label>
                    <div class="formControls col-xs-8 col-sm-8">
                        ${patientRegister.patientAddress}
                    </div>
                </div>

                <div class="row cl left" >
                    <label class="form-label col-xs-4 col-sm-4"><span class="c-red">*</span>看病时间：</label>
                    <div class="formControls col-xs-8 col-sm-8">
                        <c:if test="${patientRegister.seeDoctorTime eq '1'}">
                            上午
                        </c:if>
                        <c:if test="${patientRegister.seeDoctorTime eq '2'}">
                            下午
                        </c:if>
                        <c:if test="${patientRegister.seeDoctorTime eq '3'}">
                            晚上
                        </c:if>
                    </div>
                </div>
            </div>

            <%--右边部分：挂号信息--%>
            <div class="block col-xs-6 col-sm-6" style="background-color: lightblue; height: 300px;">
                <label style="font-weight: bold">挂号信息</label><br>
                <div class="row cl right" >
                    <label class="form-label col-xs-4 col-sm-4"><span class="c-red">*</span>挂号科室：</label>
                    <div class="formControls col-xs-8 col-sm-8">
                        <c:forEach var="obj" items="${registerDepts }">
                            <c:if test="${obj.deptId eq patientRegister.registerDept}">
                                ${obj.deptName }
                            </c:if>
                        </c:forEach>
                    </div>
                </div>

                <div class="row cl right" >
                    <label class="form-label col-xs-4 col-sm-4"><span class="c-red">*</span>医生：</label>
                    <div class="formControls col-xs-8 col-sm-8">
                        <c:forEach var="obj" items="${allDoctors }">
                            <c:if test="${obj.userId eq patientRegister.registerDoctor}">
                                ${obj.realname }
                            </c:if>
                        </c:forEach>
                    </div>
                </div>

                <div class="row cl right" >
                    <label class="form-label col-xs-4 col-sm-4"><span class="c-red">*</span>挂号类型：</label>
                    <div class="formControls col-xs-8 col-sm-8">
                        <c:forEach var="obj" items="${registers }">
                            <c:if test="${obj.registerId eq patientRegister.registerType}">
                                ${obj.registerName }
                            </c:if>
                        </c:forEach>
                    </div>
                </div>

                <div class="row cl right" >
                    <label class="form-label col-xs-4 col-sm-4"><span class="c-red">*</span>挂号员：</label>
                    <div class="formControls col-xs-8 col-sm-8">
                        <c:forEach var="obj" items="${registerOperators }">
                            <c:if test="${obj.userId eq patientRegister.registerOperator}">
                                ${obj.realname }
                            </c:if>
                        </c:forEach>
                    </div>
                </div>

                <div class="row cl right" >
                    <label class="form-label col-xs-4 col-sm-4"><span class="c-red">*</span>挂号状态：</label>
                    <div class="formControls col-xs-8 col-sm-8">
                        ${patientRegister.status eq '0' ? '未就诊' : '已就诊' }
                    </div>
                </div>

                <%--当更新就诊挂号信息的时候，显示挂号时间。但是挂号时间不能再更改了--%>
                <c:if test="${!empty patientRegister}">
                    <div class="row cl right" >
                        <label class="form-label col-xs-4 col-sm-4"><span class="c-red">*</span>挂号时间：</label>
                        <div class="formControls col-xs-8 col-sm-8">
                            ${patientRegister.registerTimeStr}
                        </div>
                    </div>
                </c:if>
            </div>
        </div>

        <%--通过隐藏方式将当前登录主体的--%>

        <div class="row cl">
            <div class="col-sm-1 col-sm-offset-4">
                <input class="btn btn-primary radius" type="submit" onclick="parent.layer.closeAll()" value="&nbsp;&nbsp;确定&nbsp;&nbsp;">
            </div>
            <div class="col-sm-1 col-sm-offset-1">
                <input class="btn btn-warning radius" type="submit" onclick="parent.layer.closeAll()" value="&nbsp;&nbsp;退出&nbsp;&nbsp;">
            </div>
        </div>
    </form>
</article>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer /作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/webuploader/0.1.5/webuploader.min.js"></script>
<script type="text/javascript" src="lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript" src="lib/ueditor/1.4.3/ueditor.config.js"></script>
<script type="text/javascript" src="lib/ueditor/1.4.3/ueditor.all.min.js"> </script>
<script type="text/javascript" src="lib/ueditor/1.4.3/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" src="lib/jquery/jquery.serializejson.min.js"></script>

<%--当挂号科室选定后，列出对应科室的医生选项--%>
<script type="text/javascript">
    $("#registerDept").change(function(){
        //1.获取到当前选中科室的id
        var deptId = $("#registerDept").val();
        //2.发送ajax请求，根据选中的deptId获取到对应科室的医生
        $.ajax({
            url:"user/getDoctorsByDeptId.do",
            type:"post",
            data:{deptId:deptId},
            async:true,
            dataType:"json",
            success:function(doctors){
                console.log("可供选择的医生：",doctors);  //打印调试
                //3.遍历doctors对象，然后把所有医生的选项放进id为registerDoctor的select标签中；但是放之前要把之前的option信息清掉
                var parentNode = document.getElementById("registerDoctor");
                parentNode.length = 1;
                for(var i = 0; i < doctors.length; i++){
                    var optionNode = document.createElement("option");
                    optionNode.value = doctors[i].userId;
                    optionNode.text = doctors[i].realname;
                    parentNode.append(optionNode);
                    // parentNode.add(optionNode);  //这种方式也可以实现添加option节点的效果
                }
            }
        });
    });
</script>

<script type="text/javascript">
    /* 使用jquery-validation技术进行表单提交前的校验 */
    $().ready(function(){
        /* 在键盘按下并释放及表单提交时验证 */
        $("#patientRegisterForm").validate({
            // 校验规则
            rules:{
                patientName:{
                    required:true
                },
                patientGender:{
                    required:true,
                },
                patientBirthday:{
                    required:true
                },
                patientIdCard:{
                    required:true
                },
                patientAddress:{
                    required:true
                },
                registerDept:{
                    required:true
                },
                registerDoctor:{
                    required:true
                },
                registerType:{
                    required:true
                },
                registerOperator:{
                    required:true
                },
                seeDoctorTime:{
                    required:true
                }
            },

            //错误提示
            messages:{
                patientName:{
                    required:"患者姓名不能为空"
                },
                patientGender:{
                    required:"请选择性别"
                },
                patientBirthday:{
                    required:"请输入患者生日"
                },
                patientIdCard:{
                    required:"请输入患者身份证号"
                },
                patientAddress:{
                    required:"请输入患者住址"
                },
                registerDept:{
                    required:"请选择挂号科室"
                },
                registerDoctor:{
                    required:"请选择医生"
                },
                registerType:{
                    required:"请选择挂号类型"
                },
                registerOperator:{
                    required:"请选择挂号员"
                },
                seeDoctorTime:{
                    required:"请选择就诊时间"
                }
            },

            /* 校验成功后的处理：
             *		1. 函数中的form就是上面表单的原始DOM对象
             * 		2. 原生对象-->Jquery对象：$(原生DOM对象)
             * 		3. Jquery对象-->原生对象: Jquery对象[0]
             */
            submitHandler:function(form){
                // 1. 将表单序列化成json格式的对象
                var jsonData = $("#patientRegisterForm").serializeJSON();
                // 2. 将json对象转成json格式字符串(因为后台SpringMVC不能接收json对象，但是可以接收标准JSON格式字符串)
                var jsonDataString = JSON.stringify(jsonData);
                console.log(jsonDataString);  //打印调试
                // 3. 通过ajax将数据提交到后台
                $.ajax({
                    url:"${empty patientRegister? 'patientRegister/insert.do' : 'patientRegister/update.do'}",
                    type:"post",
                    data:jsonDataString, //提交给后台的数据(请求体)
                    contentType:"application/json;charset=utf-8",  //提交给后台的数据类型
                    success:function(data){
                        console.log(data);
                        layer.msg(data.msg,{icon:data.code},function(){
                            if(data.code == 1){  //说明新增或更新数据成功
                                parent.refreshTable();  //刷新父页面
                                parent.layer.closeAll(); //关闭父页面
                            }
                        });
                    }
                });

                /*注意：如果直接通过jquery-validate的方式上传，无法成功*/
                /*$(form).ajaxSubmit(function(respData){
                    console.log(respData);
                    // 添加完毕后的提示
                    layer.msg(respData.msg,{icon:respData.code,time:2000},function(){
                        // 添加成功后
                        if(respData.code == 1){
                            // 刷新父页面表格
                            parent.refreshTable();
                            // 通过父页面关闭模态窗口
                            parent.layer.closeAll();
                        }
                    });
                });*/
            }
        });
    });
</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>
